<template>
	<div class="pdf">
		<el-dialog
			v-model="dialogVisible"
			fullscreen
			:modal="false"
			@close="dialogVisible = false"
		>
			<div class="showPdf">
				<iframe :src="src" frameborder="0" width="100%" height="100%"></iframe>
			</div>
			<template v-slot:footer class="dialog-footer">
				<el-button type="primary" @click="dialogVisible = false"> 关闭 </el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { BlobToUrl } from '@/utils/common/common.js';
export default {
	name: 'pdfPreview',
	data() {
		return {
			src: '', // pdf文件地址
			dialogVisible: false,
		};
	},
	watch: {
		dialogVisible() {
			if (!this.dialogVisible) {
				this.src = '';
			}
		},
	},
	methods: {
		/**
		* 预览PDF
		* @file {Object/File} pdf文件流，文件流转换url后传入pdfJs展示；本地文件则转换成url直接iframe展示
		**/
		previewPDF(file) {
			this.dialogVisible = true;
			// const viewPage = 'static/pdfJs/web/viewer.html?file='
			const params = {
				type: 'application/pdf',
				data: file
			}
			const urlSrc = BlobToUrl(params);
			const fileUrl = urlSrc;
			if (fileUrl) {
				this.src = fileUrl
			} else {
				console.log('转换失败');
				this.dialogVisible = false;
			}
		}
	},
};
</script>

<style lang="scss" scoped>
	.showPdf {
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}
	.showPdf > span {
		width: 100%;
		height: calc(100% - 35px);
		overflow: hidden;
		overflow-y: auto;
	}
	.arrow {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 0;
		border-bottom: 1px solid #eee;
		.page {
			margin: 0 10px;
		}
	}
	.el-input {
		width: 20px;
	}
	.el-button--mini {
		padding: 5px;
	}
	.el-icon--right {
		margin-left: 0;
	}
</style>
